<template>
  <div class="order-item">
    <div class="img">
      <img :src="listItem.service_img" alt="">
    </div>
    <div class="content">
      <div class="countent_item">订单编号：
        <span>
          {{ listItem.id }}
        </span>
      </div>
      <div class="countent_item title">维修项目：
        <span>
          {{ listItem.service_name }}
        </span>
      </div>
      <div class="countent_item failure">故障:
        <span>
          {{ listItem.failure }}
        </span>
      </div>
      <div class="countent_item address">服务地址：
        <span>
          {{ listItem.districts + ' ' + listItem.city + ' ' + listItem.county + ' ' + listItem.full_address}}
        </span>
      </div>
      <div class="countent_item time">预约时间：
        <span>
          {{ listItem.appointmentDate + ' ' + listItem.startTime + '-' + listItem.endTime}}
        </span>
      </div>
      <div class="take_button">
        <el-button type="info" size="mini" @click="viewOrder">查看订单</el-button>
        <el-button type="primary" size="mini" @click="takeOrder(listItem.id)">接单</el-button>
        <!-- 拒绝订单 -->
      </div>
      <div class="refuse_button">
        <slot name="refuse"></slot>
      </div>
      <div class="dialog">
        <el-dialog title="订单详细" :visible.sync="dialogVisible" width="38%" :before-close="handleClose">
          <div class="dialog_content">
            <div class="dialog_item">
              <span>
                <i>订单编号：</i>{{ listItem.id }}
              </span>
              <span>
                <i>订单状态：</i> {{ listItem.order_status }}
              </span>
            </div>
            <div class="dialog_item">
              <span>
                <i>联系人：</i> {{ listItem.linkman }}
              </span>
              <span>
                <i>预约时间：</i> {{ listItem.appointmentDate + ' ' + listItem.startTime + '-' + listItem.endTime }}
              </span>
            </div>
            <div class="dialog_item">
              <span>
                <i>维修项目：</i> {{ listItem.service_name }}
              </span>
              <span>
                <i>故障原因: </i>
                {{ listItem.failure }}
              </span>
            </div>
            <div class="dialog_item">
              <span>
                <i>服务地址：</i>
                {{ listItem.districts + ' ' + listItem.city + ' ' + listItem.county + ' ' + listItem.full_address}}
              </span>
            </div>
            <div class="dialog_item">
              <span>
                <i>备注：</i> {{ listItem.remark || '无' }}
              </span>
            </div>
          </div>
          <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span> -->
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
import { confirmTakeOrderService } from '@/api/maintainer'
export default {
  props: {
    listItem: {
      type: Object
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  created () {},
  methods: {
    viewOrder () {
      this.dialogVisible = true
    },
    handleClose (done) {
      done()
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => { })
    },
    takeOrder (id) {
      MessageBox.confirm('是否接单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // TODO: 接受订单 --- 请求接口
        await confirmTakeOrderService(id)
        await MessageBox.alert('已接单', '提示', {
          confirmButtonText: '确定',
          type: 'success'
        })
        this.$router.push('/maintainer/orderlist')
      }).catch(() => {})
    }

  },
  components: {

  }
}
</script>

<style lang="less" scoped>
.order-item {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .img{
        width: 70px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .content{
        flex: 1;
        padding-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #555;
        .countent_item{
            padding: 0 10px;
        }
        span{
            margin-top: 10px;
            display: inline-block;
            font-weight: normal;
            font-size: 14px;
            font-weight: bold;
        }
        .take_button{
            // flex: 1;
            display: flex;
            align-items: center;
        }
        .dialog{
          .dialog_item{
            span{
              margin: 10px 25px;
              i{
                font-weight: normal;
              }
            }
          }
        }
        .refuse_button{
            flex: 1;
            padding-left: 15px;
        }
    }
}
</style>
